<template>
  <div class="outer">
    <div class="dividing"></div>
    <div class="bottom-btns"
         v-if="noPay">
      <div class="negative btns"
           @click="negativeFunc"
           v-if="showNegative">{{negativeText}}</div>
      <div class="positive btns"
           @click="positiveFunc"
           v-if="showPositive">{{positiveText}}</div>
      <div class="end-order btns"
           @click="clickEndOrder"
           v-if="showEndOrder">{{endOrderText}}</div>
    </div>
    <div v-else
         class="bottom-btns-nopay">
      <div class="total-price">合计：{{detailsData.orderamount|math-money}}元</div>
      <div class="to-pay-outer">
        <div class="to-pay"
             @click="goPay">去付款</div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins'
export default {
  mixins: [mixins],
  name: 'bottom-btns',
  data () {
    return {
      noPay: false,
      showNegative: false,
      showPositive: false,
      showEndOrder: false,
      endOrderText: '完成订单',
      negativeText: '完成订单',
      positiveText: '完成订单',
      negativeFunc: null,
      positiveFunc: null
    }
  },
  props: {
    detailsData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    detailsData: {
      immediate: true,
      deep: true,
      handler (val) {
        this.noPay = true
        let self = this
        switch (val.orderstatus) {
          case '0':// 待付款
            this.noPay = false
            break
          case '1': // 待发货
            this.showNegative = false
            this.showPositive = false
            this.negativeText = '提醒发货'
            // this.negativeFunc = function () {
            //   // console.error('提醒发货')
            //   // 提醒发货
            // }
            break
          case '2': // 待收货
            this.showPositive = true
            this.showNegative = true
            this.negativeText = '查看物流'
            this.positiveText = '确认收货'
            this.negativeFunc = function () {
              // 查看物流
              self.tologistics()
            }
            this.positiveFunc = function () {
              // 确认收货
              self.updateOrderStatus('3')
            }
            break
          case '3': // 已收货
            this.showNegative = true
            this.showEndOrder = true
            this.negativeText = '查看物流'
            this.negativeFunc = function () {
              // console.error('查看物流')
              self.tologistics()
            }
            break
          case '4': // 已完成
            this.showNegative = true
            this.negativeText = '查看物流'
            this.negativeFunc = function () {
              // console.error('查看物流')
              self.tologistics()
            }
            break
          case '5': // 已取消
            this.showNegative = false
            this.showPositive = false
            this.negativeText = '删除订单'
            // this.negativeFunc = function () {
            //   console.error('删除订单')
            // }
        }
      }
    }
  },
  computed: {
  },
  methods: {
    tologistics () {
      this.$router.push({name: 'logistics-details', query: { orderid: this.detailsData.orderid }})
    },
    // 更新状态
    updateOrderStatus (newOrderStatus) {
      try {
        this.$ajax.put('/tOrder/updateOrderStatus.json', {
          orderid: this.detailsData.orderid,
          orderstatus: newOrderStatus
        })
        location.reload()
      } catch (e) {
        this.$toast(e)
      }
    },
    clickEndOrder () {
      // '完成订单'
      this.updateOrderStatus('4')
    },
    goPay () {
      // '去付款'
      this.$router.push({name: 'pay', query: {orderid: this.detailsData.orderid}})
    }
  },
  mounted () {
  }
}
</script>

<style lang="stylus" scoped>
.outer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  z-index: 10;

  .dividing {
    width: 100%;
    height: 1px;
    background: RGBA(238, 238, 238, 1);
  }

  .bottom-btns {
    display: flex;
    justify-content: flex-end;
    height: 98px;
    width: 100%;
    padding-right: 30px;
    box-sizing: border-box;
    align-items: center;

    .negative {
      height: 54px;
      border: 2px solid;
      color: rgba(153, 153, 153, 1);
    }

    .btns {
      width: 152px;
      font-size: 28px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .positive {
      margin-left: 30px;
      height: 58px;
      background: rgba(174, 42, 38, 1);
      color: rgba(255, 255, 255, 1);
    }

    .end-order {
      height: 54px;
      border: 2px solid;
      color: rgba(174, 42, 38, 1);
      margin-left: 30px;
    }
  }

  .bottom-btns-nopay {
    display: flex;
    align-items: center;
    height: 108px;
    padding-left: 30px;
    box-sizing: border-box;
    padding-right: 30px;

    .total-price {
      font-size: 30px;
      color: rgba(227, 20, 54, 1);
    }

    .to-pay-outer {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 74px;

      .to-pay {
        width: 190px;
        height: 74px;
        background: rgba(174, 42, 38, 1);
        border-radius: 12px;
        font-size: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
